<!-- 表单的组件 -->
<template>
  <div class="form-table">
    <el-table :data="tableData" border>
      <el-table-column label="#" width="50" fixed>
        <template slot-scope="scope">
          <div class="scope-index">
            <span>{{ scope.$index + 1 }}</span>
          </div>
          <div class="scope-action">
            <el-button
              @click="handleRemove(scope.$index)"
              type="danger"
              icon="el-icon-minus"
              size="mini"
              circle
            ></el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.length == 0"></el-table-column>
      <template v-else>
        <!-- 显示元素名称 -->
        <el-table-column
          v-for="(column, index) in columns"
          :key="column.key"
          :label="column.name"
        >
          <!-- <el-input></el-input> -->
          <template slot-scope="scope" v-if="column.options.show == true">
            <!--:rules="{required: true, message: '不能为空', trigger: 'blur'}"-->
            <el-form-item
              :prop="widget.model + '.' + scope.$index + '.' + column.model"
              :rules="column.rules ? column.rules : []"
            >
              <!-- 调用父组件生成具体表单 -->
              <!--onclick="handlerRow(column.model,scope.$index)"-->
              <GenerateElementItem
                :blanks="blanks"
                is-table="table"
                :widget="column"
                :path="widget.model + '.' + scope.$index + '.' + column.model"
                :models_temp="models_temp"
                v-model="scope['row'][column.model]"
                :models.sync="dataModels"
                :remote="remote"
              >
                <template
                  v-slot:[blank.name]="blankScope"
                  v-for="blank in blanks"
                >
                  <slot :name="blank.name" :model="scope.row"></slot>
                </template>
              </GenerateElementItem>
            </el-form-item>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!--    <el-button icon="el-icon-plus" type="text" @click="handleAddRow">添加</el-button>-->
    <el-button
      type="primary"
      :disabled="widget.options.disabled"
      @click.native="handleAddRow()"
      >添加</el-button
    >
  </div>
</template>

<script>
import { verification } from "../router/verification.js";
import { getLable, guid } from "../js/formUtils.js";

export default {
  components: {
    GenerateElementItem: () => import("../GenerateElementItem.vue")
  },
  props: [
    "columns",
    "value",
    "models",
    "remote",
    "blanks",
    "models_temp",
    "widget"
  ],

  data() {
    return {
      tableData: this.value,
      dataModels: this.models
    };
  },
  created() {},
  mounted() {
    for (var i = 0; i < this.columns.length; i++) {
      if (this.columns[i].rules) {
        for (var j = 0; j < this.columns[i].rules.length; j++) {
          this.columns[i].rules[j].validator = this.validatePass;
        }
      }
    }
  },
  methods: {
    validatePass(rule, info, callback) {
      verification(rule, info, callback, null);
    },
    handleAddRow() {
      let item = {};
      for (let i = 0; i < this.columns.length; i++) {
        item[this.columns[i].model] = this.columns[i].options.defaultValue;
        item["ID_"] = guid();
      }

      this.tableData.push(item);
    },

    handleRemove(index) {
      this.tableData.splice(index, 1);
    },
    handleFoc(ee) {}
  },
  watch: {},
  created() {}
};
</script>

<style lang="scss">
.form-table {
  .el-table__empty-block {
    display: none;
  }

  .scope-action {
    display: none;
  }

  .scope-index {
    display: block;
  }

  .hover-row {
    .scope-action {
      display: block;
      .el-button {
        padding: 3px;
      }
    }

    .scope-index {
      display: none;
    }
  }
}
</style>
